import React from 'react';
import { Button, Form, Icon, Input } from 'antd';
import router from 'umi/router';

import styles from './style.less';

const login = ({ form }) => {
  const handleSubmit = () => {
    router.push('/prelogin');
  }

  const { getFieldDecorator } = form;

  return (
    <div className={styles.loginBox}>
      <Form onSubmit={handleSubmit}  className={styles.form}>
        <p className={styles.msg}>Sign in to start your session：</p>
        <Form.Item style={{marginBottom: 10}}>
          {
            getFieldDecorator('j_username', {
              rules: [
                {required: true, whitespace: true, message: 'Please enter username'},
                {pattern: /^[a-zA-Z0-9_]+$/, message: 'Username must be letter, numeric or underlined!'},
              ]
            })(
              <Input
                prefix={<Icon type='user' style={{color: 'rgba(0,0,0,.25)'}}/>}
                placeholder='Username'
              />
            )
          }
        </Form.Item>
        <Form.Item style={{marginBottom: 10, textAlign: 'right'}}>
          <Button type='primary' htmlType='submit' className={styles.button}>
            Sign in
          </Button>
        </Form.Item>
      </Form>
      <div className={styles.footer}>
        &copy;&nbsp;HNX
      </div>
    </div>
  );
}

export default Form.create()(login);
